<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>充值</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    
    <style>
    
    #main {
    		background-color: #FFFFFF;
    }
    	.pay {
    		border-bottom: 1px solid #EEEEEE;
    		padding: 20px 15px;
    	}
    .pay-title {
    		margin-left: 10px;
    		font-size: 16px;
    		color: #333333;
    		margin-bottom: 15px;
    }

    .pay-choice-area {
	    	
    }
    .pay-column {
    		display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-flex-direction: row;
	    flex-direction: row;
	    
	    margin-bottom: 20px;
    }
    .pay-item {
    		margin-right: 10px;
    		margin-left: 10px;
    }
    .btn-pay-choice {
    		text-align: center;
    		line-height: 35px;
    		width: 130px;
    		height: 35px;
    		border: 1px solid #FC8719;
    		background-color: #FFFFFF;
    		color: #333333;
    		font-size: 14px;
    }
    
    .pay-item.active .btn-pay-choice {
    		background-color: #FC8719;
    		border: 1px solid #FC8719;
    		color: #FFFFFF;
    		font-size: 14px;
    }
    
    .input-pay-item {
    		border: 1px solid #FC8719;
    		height: 35px;
    		width: 130px;
    		color: #FC8719;
    		font-size: 14px;
		text-align: center;
    }
    
    
    .pay-operation {
    		position: absolute;
    		bottom: 25px;
		padding-left: 12px;
		padding-right: 12px;
    		text-align: center;
    		width: 100%;
    		-webkit-box-sizing: border-box;
		box-sizing: border-box;
    }
    .pay-operation-tip {
    		font-size: 10px;
    		color: #8e8e8e;
    		text-align: center;
    		width: 100%;
    }
    .pay-operation-tip span {
    		color: #FC8719;
    }
    .btn-pay {
    		height: 40px;
    		color: #FFFFFF;
    		background-color: #FC8719;
    		line-height: 40px;
    		margin-top: 10px;
    }
    .btn-pay.active {
    		opacity: 0.8;
    }
    </style>
    
</head>

<body>
	
	<div id="wrap">
	
		<div id="main">
		
			<div class="pay">
			
				<div class="pay-title">充值金额：</div>	
				
				<div class="pay-choice-area">
					<div class="pay-column">
					
						<div class="pay-item active">
							<div class="btn-pay-choice">¥ 10元</div>
						</div>
					
						<div class="pay-item">
							<div class="btn-pay-choice">¥ 50元</div>
						</div>
					</div>
					
					<div class="pay-column">
					
						<div class="pay-item">
							<div class="btn-pay-choice">¥ 100元</div>
						</div>
					
						<div class="pay-item">
							<input placeholder="其他数额" class="input-pay-item" type="number" />
						</div>
					</div>
				
				</div>	
	
			</div>
			
			<div class="pay-operation">
				<div class="pay-operation-tip">点击去充值，即表示已阅读并同意 <span>充值协议</span></div>
				<div class="btn-pay">微信支付</div>
			</div>
			
		</div>
	
	</div>
		
</body>


<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
	apiready = function(){
		
	};
</script>
</html>